<template>
<div class="main">
   <div class="top-column">
    <div class="buttons">
        <div
          :class="[
            'button',
            'thumb',
            showTab === 'clothing' ? 'sel' : 'nosel',
          ]"
          @click="() => (showTab = 'clothing')"
        >
          号衣量体
        </div>
        <div
          :class="[
            'button',
            'thumb',
            showTab === 'netSize' ? 'sel' : 'nosel',
          ]"
          @click="() => (showTab = 'netSize')"
        >
          净尺寸量体
        </div>
        <div
          :class="[
            'button',
            'thumb',
            showTab === 'madeUp' ? 'sel' : 'nosel',
          ]"
          @click="() => (showTab = 'madeUp')"
        >
          成衣量体
        </div>
      </div>
   </div>  

   <div v-show="showTab === 'clothing'"><Clothing :position="position" /></div>
   <div v-show="showTab === 'netSize'"><NetSize :position="position" /></div>
   <div v-show="showTab === 'madeUp'"><MadeUp :position="position" /></div>
</div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue"
import {VolumeType,Position} from "@/interface";
import  Clothing from "./components/Clothing/index.vue";
import  MadeUp from "./components/MadeUp/index.vue";
import  NetSize from "./components/NetSize/index.vue";
import position from "@/json/position.json"
interface Props{
      defTab?:VolumeType,   //默认显示的尺寸   'clothing' 号衣  | 'madeUp' 成衣 | 'netSize' 净衣
      position?:Position,   //各种腰围 胸围 等等 数据
}

const props = withDefaults(defineProps<Props>(),{
    defTab:'clothing',
    position:()=>position
})



const showTab = ref<VolumeType>(props.defTab);

</script>
<style scoped lang="scss">
@import "./index.scss";
</style>